<template>
    <div class="table-container pull-height">
        <div class="table-header">
            <el-button type="primary" @click="handleAdd" size="small">新 增</el-button>
        </div>
        <!--数据表格组键 crud  tableData该组件的表格数据-->
        <Crud :tableOption="tableOption" :tableData="tableData" :tableLoading="tableLoading" :page="page" ref="crud"
              width="290" @handleSave="handleSave" @handleDel="handleDel" @handleUpdate="handleUpdate" menu/>

    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import Crud from "@/components/crud/index.vue"
    import ajax from "../../api/ajax";

    export default {
        name: 'table_${tableInfo.originalTableName}',
        data() {
            return {
                tableOption: {}, //表格设置属性
                tableData: [], //表格的数据
                tablePage: 1,
                tableLoading: false,
                tabelObj: {},
                message: "",
                testData: 1,
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 //每页显示多少条
                },
                grade: {
                    box: false,
                    check: []
                }
            };
        },
        created() {
            //初始化数据格式
            this.tableOption = {
                border: true,
                index: true,
                selection: false,
                menuWidth: 300,
                column: 
				
				[
				<#list tableInfo.fieldInfos as fieldInfo>
			 		{
                        label: "${fieldInfo.remark}",
                        prop: "${fieldInfo.proName}",
                        rules: [{required: false, message: "请输入${fieldInfo.colName}", trigger: "blur"}]
                    },
				</#list>
				
				]
				 
            };
            this.handleList();
        },
        watch: {},
        mounted() {
        },
        computed: {
                ...mapGetters(["permission", "menuAll"])
    },
    props: [],
            methods: {
        /**
         * @title 获取数据
         * @detail 赋值为tableData表格即可
         *
         **/
        /**
         * 获得
         * @returns {Promise}
         */
        handleList() {
            this.tableLoading = true;
            var v = this;
			ajax.postAjax('/mgr/${tableInfo.firstLowerCase}/list',this.page,function (data) {
                console.log(data);
				data = data.data;
                v.tableData = data.data.list;
                v.page = {
                    total: data.data.total,
                    pageSize: data.data.pageSize
                };
                v.tableLoading = false;
            });

        },
        //添加页面初始化
        handleAdd() {
            this.$refs.crud.handleAdd();
        },
        //自定的按钮，可在列上定义按钮在列上
        handleGrade(cc) {
            alert(cc);
        },
        //+++组件上注明（done 为表单关闭函数） 注意方法名有对应
        handleSave(row, done) {
            console.log(row);
            ajax.postAjax('/mgr/${tableInfo.firstLowerCase}/add', row, function (data) {
					console.log(data)
					//yes
					//row 当前添加的数据，name值为option.js 相对应的prop值 注意添加使用 push 到当前列上
					this.tableData.push(row);
					// vue的提示窗
					this.$message({
						showClose: true,
						message: "添加成功" + row.test + "====>" + row.name,
						type: "success"
					});
					//表单关闭事件
					done();
				}
            );
        },
        //vue 刪除事件，將row里的參數拿出請求
        handleDel(row, index) {
            console.log(row)
            this.$confirm(`是否确认删除序号为#*row.name*#`, "提示", {
                //這是定義提示按鈕及提示類型
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                ajax.getAjax('/mgr/${tableInfo.firstLowerCase}/delete?id=' + row.id, function (data) {
                console.log(data)
            });
            //這裡開始請求
            this.tableData.splice(index, 1);
            this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
            });
        }).catch(err => {
            });
        },
        handleUpdate(row, index) {
            console.log(row)
            //yes
            this.$confirm(`是否确认修改序号为 {row.name}`, "提示", {
                //這是定義提示按鈕及提示類型
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                ajax.postAjax('/mgr/${tableInfo.firstLowerCase}/update', row, function (data) {
                console.log(data);
            });
            //這裡開始請求
            this.tableData.splice(index, 1);
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success"
            });
        }).catch(err => {
            });
        },
    },
    components: {
        Crud
    }
    };
</script>

